<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--每隔20秒刷新一次-->
		<!--<meta http-equiv="refresh" content="20">-->
		<title>选项卡片效果</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/dialog.css"/>
		<link rel="stylesheet" type="text/css" href="css/schedule.css"/>
		<script src="js/jquery.min.js"></script>
				<script src="js/module/schedule.js"></script>
	</head>
	<body>
		<header>
			<div class="header">this is header</div>
		</header>
		<div class="main">
			<section>
				<ul class="ul-nav">									
					
				</ul>
			</section>
			<aside>
				<div class="aside-div">
					<table border="0" cellspacing="0" cellpadding="0">
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>爱好</th>
							<th>职业</th>
						</tr>
						<tr>
							<td>0</td>
							<td>测试0</td>
							<td>旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游旅游</td>
							<td>老师</td>
						</tr>
						<tr>
							<td>1</td>
							<td>测试1</td>
							<td>美食</td>
							<td>医生</td>
						</tr>
						<tr>
							<td>2</td>
							<td>测试2</td>
							<td>运动</td>
							<td>警察</td>
						</tr>
					</table>
					
				</div>
				<div class="div-input aside-div">
					<p class="p-radio">
						<label for="登山">
							<input type="radio" name="sport"  id="登山" />登山
						</label>
						<label for="篮球">
							<input type="radio" name="sport" id="篮球" />篮球
						</label>
						<label for="游泳">
							<input type="radio" name="sport" id="游泳" />游泳
						</label>
					</p>
					<p class="p-checkbox">
						<label for="all">
							<input type="checkbox" id="all" />全选
						</label>
						<label for="html">
							<input type="checkbox" id="html" name="subBox" />html
						</label>
						<label for="css">
							<input type="checkbox" id="css" name="subBox" />css
						</label>
						<label for="javascript">
							<input type="checkbox" id="javascript" name="subBox" />javascript
						</label>
					</p>
				</div>
				<div id="dialog" class="aside-div">
					<button class="btn" id="JS_dialog">
						Click Me!
					</button>
					<!-- 遮罩层 -->
					<div class="black" id="black"></div>
					<!-- 弹出框盒子 -->
					<div class="dialog" id="dialogBox">
						<span class="dialog_close">x</span>
						<h3 class="dialog_title">弹出框标题</h3>
						<div class="dialog_content">
							这里是内容区
						</div>
					</div>
					
				</div>
				<div class="aside-div">
					<h3>时间轴模块</h3>
					<ul id="schedule">
						<li class="schedule-item">
							<span class="color-circle" data-item="1">1</span>
							<span class="progress-bar">
								<a href="javascript:void(0)" title="负责人：李医生">接警</a>
							</span>
							<p class="track-progress">
								<span class="track"></span>
								<span class="track-item"></span>
							</p>
							
						</li>	
						<li class="schedule-item">
							<span class="color-circle" data-item="1">2</span>
							<span class="progress-bar">
								<a href="javascript:void(0)" title="负责人：吴医生">出车</a>
							</span>
							<p class="track-progress">
								<span class="track"></span>
								<span class="track-item"></span>
							</p>
						</li>	
						<li class="schedule-item">
							<span class="color-circle" data-item="3">3</span>
							<span class="progress-bar">
								<a href="javascript:void(0)" title="负责人：刘医生">回院</a>
							</span>
						</li>	
					</p>
				</div>
			</aside>
		</div>
		
		<script>
			$(function(){
				var circle = $(".schedule-item .color-circle");
				var line = $(".track-progress .track-item");
				//prototype
				function objParent(){
					
				}
			
				circle.each(function(i,o){					
					if(circle.eq(i).data("item") == "1"){
						$(this).css("background","rgb(22,160,93)");
					}else if(circle.eq(i).data("item") == "2"){
						$(this).css("background","rgb(255,206,68)");
					}else if(circle.eq(i).data("item") == "3"){
						$(this).css("background","rgb(216,76,41)");
					}else {
						$(this).css("background","rgb(238,238,238)");
					}
				});
				line.each(function(i,o){					
					line.eq(0).css("display","block");
					line.eq(0).animate({height:"100%"},3000,function(){
						line.eq(1).css("display","block");
						line.eq(1).animate({height:"100%"},3000);
					});
				});
				
				
			});			
		</script>
		<script src="js/common/barLeft.js"></script>	
		<script src="js/module/checkbox.js"></script>
		<script src="js/module/dialog.js"></script>

	</body>

</html>